<template>
  <div id="ment">
    <el-container>
      <!-- 内容 -->
      <el-main>
        <el-row :gutter="24">
          <el-col :span="6" :offset="1">
            <div class="grid-content bg-purple">
              <el-form ref="form" :model="Ment" label-width="100px">
                <el-form-item label="会员名称：">
                  <el-input v-model="Ment.guanli_hymc"></el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
          <el-col :span="6" :offset="1">
            <div class="grid-content bg-purple-light">
              <el-form ref="form" :model="Ment" label-width="100px">
                <el-form-item label="状态：" class="drom">
                  <el-select v-model="Ment.guanli_zt" placeholder="请选择">
                    <el-option v-for="(v,i) in ztDate" :label="v" :value="v" :key="i">{{v}}</el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
          <el-col :span="6" :offset="2">
            <div class="grid-content bg-purple">
              <el-button type="primary" @click="onSubmit">查询</el-button>
              <el-button type="info" @click="onReset">重置</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="23" :offset="1">
            <div class="grid-content bg-purple-light">
              <!-- 表格 -->
              <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="guanli_id" label="序号" width="100">
                </el-table-column>
                <el-table-column prop="guanli_hymc" label="会员名称" width="100">
                </el-table-column>
                <el-table-column prop="guanli_sjhm" label="手机号" width="200">
                </el-table-column>
                <el-table-column prop="guanli_fh" label="房号" width="200">
                </el-table-column>
                <el-table-column prop="guanli_yxdz" label="邮箱地址" width="200">
                </el-table-column>
                <el-table-column prop="guanli_cjsj" label="创建时间" width="200">
                </el-table-column>
                <el-table-column prop="guanli_zt" label="状态" width="120">
                </el-table-column>
                <el-table-column prop="operation" label="操作">
                  <template slot-scope="scope">
                    <el-button @click="Editor(scope.row)" type="text">编辑</el-button>
                    <el-button @click="disable(scope.row)" type="text">
                      <span v-if="scope.row.guanli_zt=='启用'">停用</span>
                      <span v-else>启用</span>
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!-- 编辑弹框 -->
            <el-dialog title="编辑" :visible.sync="EditorVisible" width="60%" :before-close="EditorClose">
              <div id="drom_up">
                <div>
                  <el-main>
                    <el-row :gutter="22">
                      <el-col :span="10" :offset="1">
                        <div class="grid-content bg-purple">
                          <el-form ref="form" :model="Editortable" label-width="100px">
                            <el-form-item label="会员姓名：">
                              <el-input v-model="Editortable.guanli_hymc" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="电话号码：" class="drom">
                              <el-input v-model="Editortable.guanli_sjhm"></el-input>
                            </el-form-item>
                            <el-form-item label="房号：">
                              <el-input v-model="Editortable.guanli_fh" disabled></el-input>
                            </el-form-item>
                          </el-form>
                        </div>
                      </el-col>
                      <el-col :span="10" :offset="1">
                        <div class="grid-content bg-purple">
                          <el-form ref="form" :model="Editortable" label-width="100px">
                            <el-form-item label="邮箱地址：">
                              <el-input v-model="Editortable.guanli_yxdz" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="创建时间：" id='data' disabled>
                              <el-input v-model="Editortable.guanli_cjsj" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="状态：">
                              <el-switch v-model="Editortable.guanli_zt" active-color="#13ce66" inactive-color="#ff4949">
                              </el-switch>
                            </el-form-item>
                          </el-form>
                        </div>
                      </el-col>
                    </el-row>
                  </el-main>
                </div>
                <div>
                  <el-row :gutter="22">
                    <el-col :span="6" :offset="10">
                      <div class="grid-content bg-purple">
                        <span slot="footer" class="dialog-footer">
                          <el-button @click="EditorVisible = false">取 消</el-button>
                          <el-button type="primary" @click="EditorSuccessful">确 定</el-button>
                        </span>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-dialog>
          </el-col>
        </el-row>
      </el-main>
      <!-- 页码 -->
      <el-footer>
        <page class="page"></page>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import Event from '../../utils/Event.js'
import page from '../../components/page.vue'
export default {
  components: { page },
  data() {
    return {
      Ment: {
        guanli_hymc: '',
        guanli_zt: '',
      },
      EditorVisible: false,
      Editortable: {
        guanli_hymc: '',
        guanli_sjhm: '',
        guanli_fh: '',
        guanli_yxdz: '',
        guanli_cjsj: '',
        guanli_zt: true,
      },
      disableData: {
        guanli_zt: '',
        guanli_sjhm: '',
      },
      tableData: [],
      toltable: [],
      ztDate: [],
    }
  },
  methods: {
    // 查询
    onSubmit() {
      for (let j in this.Ment) {
        if (this.Ment[j].trim()) {
          let arr = this.toltable.filter((i) => {
            return i[j].indexOf(this.Ment[j]) != -1
          })
          Event.$emit('noticeData', arr)
        }
      }
    },
    // 重置
    onReset() {
      this.Ment = {}
      this.getuer()
    },
    // 停用
    disable(data) {
      data.guanli_zt == '启用' ? data.guanli_zt = '停用' : data.guanli_zt = '启用'
      this.$axios({
        url: '/vip/guanliChange',
        method: 'post',
        data: {
          zt: data.guanli_zt,
          sjhm: data.guanli_sjhm
        }
      }).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            message: data.guanli_zt + '成功',
            type: 'success'
          })
          this.getuer()
        }
      })
    },
    // 点击修改，弹框出现
    Editor(data) {
      this.EditorVisible = true;
      this.Editortable = { ...data }
      this.Editortable.guanli_zt == '启用' ? this.Editortable.guanli_zt = true : this.Editortable.guanli_zt = false
    },
    // 确定修改
    EditorSuccessful() {
      this.Editortable.guanli_zt == true ? this.Editortable.guanli_zt = '启用' : this.Editortable.guanli_zt = '停用'
      this.$axios({
        url: '/vip/guanliChange',
        method: 'post',
        data: {
          zt: this.Editortable.guanli_zt,
          sjhm: this.Editortable.guanli_sjhm
        }
      }).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.EditorVisible = false;
          this.getuer()
        }
      })
    },
    EditorClose(data) {
      this.$confirm('确认关闭？', {
        callback: (action, instance) => {
          //当点击关闭时
          if (action == 'confirm') {
            this.EditorVisible = false;
            // 当点击取消时
          } else if (action == 'cancel') {
            this.EditorVisible = true;
          }
        },
      });
    },
    getuer() {
      this.$axios({
        url: '/vip/guanliSel',
        method: 'get'
      }).then((res) => {
        Event.$emit('table', res.data.data)
        this.toltable = res.data.data
        for (let i = 0; i < this.toltable.length; i++) {
          this.ztDate.push(this.toltable[i].guanli_zt)
          this.ztDate = [...new Set(this.ztDate)]
        }
      })
    },
    receive() {
      Event.$on('tableData', v => {
        this.tableData = v.tableData
      })
    },
  },
  created() {
    this.getuer()
  },
  mounted() {
    this.receive()
  },
  // 数据更新前
  beforeUpdate() {
    this.receive()
  }
}
</script>

<style scoped lang="less">
#ment {
  //  background-color: white;
  padding: 50px;
  height: 100%;

  .el-select {
    width: 300px;
  }

  .el-input {
    width: 300px;
  }
  .el-table {
    margin-top: 50px;
  }
}
.page {
  text-align: center;
}
</style>